import { Form, Input, Button, Checkbox } from 'antd';
// 使用状态 里面的数据，需要引入store  createContext
import store from '../../../store';
import {useContext} from 'react'
import { ContextAPI } from '../../../index';
import http from '../../../utils/http';

function LoginIn() {
    const context = useContext(ContextAPI);

    const onFinish = (values) => {
        // console.log('Success:', values);
        http({
            url: '/login',
            data:{
                com_um : values.username,
                com_password : values.password
            }
        }).then((res) => {
            console.log(res.data);
            if(res.data[0].com_um){
                // 把登录信息存储在浏览器缓存里面
                sessionStorage.setItem('user',JSON.stringify(res.data));
                // 也存一份在store 里面
                context.setData(res.data);
            }
        })
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    
    return (
                 <div>
            <Form
                name="basic"
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 20,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    label="账号"
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: '请输入账号',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码',
                        },
                    ]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    name="remember"
                    valuePropName="checked"
                    wrapperCol={{
                        offset: 4,
                        span: 20,
                    }}
                >
                    <Checkbox>记住密码</Checkbox>
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 4,
                        span: 20,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}
export default LoginIn;